<template>
  <div class="white_div">
    <el-card>
      <el-button type="primary" plain @click="add" class="btn">添加赛事</el-button>
      <!-- 添加 -->
      <el-dialog title="增加赛事" :visible.sync="addDialogVisible" width="28vw">
        <el-form label-width="auto">
          <el-form-item label="竞赛名字:" width="22vw">
            <el-input v-model="addmatch.competeName" placeholder="请输入竞赛名字" width="20vw"></el-input>
          </el-form-item>
          <el-form-item label="赞助商:" width="22vw">
            <el-input width="20vw" placeholder="请输入赞助商" v-model="addmatch.competeSponsor">
            </el-input>
          </el-form-item>
          <el-form-item label="类型:">
            <el-select v-model="addmatch.competeType">
              <el-option value="1" label="知识竞答擂台"></el-option>
              <el-option value="2" label="CTF擂台"></el-option>
              <el-option value="3" label="场景擂台"></el-option>
              <el-option value="4" label="校园赛"></el-option>
              <el-option value="5" label="企业赛"></el-option>
              <el-option value="6" label="实操考核"></el-option>
              <el-option value="7" label="知识竞答"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间:">
            <el-input v-model="addmatch.competeStartdate" placeholder="请输入开始时间" type="date"></el-input>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-input v-model="addmatch.competeEnddate" placeholder="请输入结束时间" type="date"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload class="upload-demo" action="http://172.16.13.212:8090/uploadoss" :on-remove="handleRemove"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :limit="1" :on-exceed="handleExceed">
              <el-button size="small" type="primary" class="push">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <el-image :src="addmatch.competeImg" alt=""></el-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addcompetesinfo">确定</el-button>
        </span>
      </el-dialog>
      <!-- 表格渲染 -->
      <el-table :data="matchData" style="width: 100%">
        <el-table-column type="index" width="50" label="序号"> </el-table-column>
        <el-table-column property="competeSponsor" label="竞赛赞助商" width="380">
        </el-table-column>
        <el-table-column property="competeName" label="竞赛名字" width="260">
        </el-table-column>
        <el-table-column property="competeState" label="竞赛状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.competeState == null">暂无</span>
            <span v-if="scope.row.competeState == 1">正在使用</span>
          </template>
        </el-table-column>
        <el-table-column property="competeStartdate" label="开始时间">
          <template slot-scope="scope">
            <span>
              {{ (scope.row.competeStartdate).slice(0, 10) }}
              {{ (scope.row.competeStartdate).slice(11, 16) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="competeEnddate" label="截至时间">
          <template slot-scope="scope">
            <span>{{ (scope.row.competeEnddate).slice(0, 10) }}
              {{ (scope.row.competeEnddate).slice(11, 16) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.competeImg" shape="square"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateCompetes(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletematch(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑 -->
      <el-dialog title="编辑赛事" :visible.sync="updateDialogVisible" width="28vw">
        <el-form label-width="auto">
          <el-form-item label="竞赛名字:" width="22vw">
            <el-input v-model="updatematch.competeName" placeholder="请输入竞赛名字" width="20vw"></el-input>
          </el-form-item>
          <el-form-item label="赞助商:" width="22vw">
            <el-input width="20vw" placeholder="请输入赞助商" v-model="updatematch.competeSponsor">
            </el-input>
          </el-form-item>
          <el-form-item label="类型:">
            <el-select style="float: left" v-model="updatematch.competeType">
              <el-option value="1" label="知识竞答擂台"></el-option>
              <el-option value="2" label="CTF擂台"></el-option>
              <el-option value="3" label="场景擂台"></el-option>
              <el-option value="4" label="校园赛"></el-option>
              <el-option value="5" label="企业赛"></el-option>
              <el-option value="6" label="实操考核"></el-option>
              <el-option value="7" label="知识竞答"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间:">
            <el-input v-model="updatematch.competeStartdate" placeholder="请输入开始时间" type="date"></el-input>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-input v-model="updatematch.competeEnddate" placeholder="请输入结束时间" type="date"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload class="upload-demo" action="http://172.16.13.212:8090/uploadoss" :on-remove="handleRemove"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :limit="1" :on-exceed="handleExceed">
              <el-button size="small" type="primary" class="push">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
            <el-image :src="updatematch.competeImg" alt=""></el-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateinfo">确定</el-button>
        </span>
      </el-dialog>
      <!-- 分页区域 -->
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size="query.pageSize" :current-page.sync="query.currentPage" :page-sizes="[5, 10, 15, 20]"
        @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("tags");
export default {
  data() {
    return {
      matchData: [],
      query: {
        currentPage: 1,
        pageSize: 5,
      },
      total: '',
      addDialogVisible: false,
      updateDialogVisible: false,
      addmatch: {
        competeEnddate: "",
        competeImg: "",
        competeName: "",
        competeSponsor: "",
        competeStartdate: "",
        competeState: 0,
      },
      updatematch: {
        competeEnddate: "",
        competeImg: "",
        competeName: "",
        competeSponsor: "",
        competeStartdate: "",
        competeState: 0,
      },
    }
  },
  methods: {
    ...mapMutations(["addTabs"]),
    async getmatch() {
      const res = await this.$api.match.getonline(this.query);
      console.log("ma", res);
      this.matchData = res.data.selCompeteVOS.list;
      this.total = res.data.selCompeteVOS.total;

    },
    add() {
      this.addDialogVisible = true;
    },
    // 分页
    changeCurrentPage(args) {
      this.query.currentPage = args;
      this.getmatch();
    },
    changePageSize(args) {
      console.log(args);
      this.query.pageSize = args;
      this.getmatch();
    },
    async addcompetesinfo() {
      console.log(this.addmatch);
      const res = await this.$api.match.addonline(this.addmatch);
      console.log("match", res);
      if (res.code) {
        this.addDialogVisible = false
        this.$message.success(res.message);
       
        this.getmatch();
      }
    },
    async deletematch(id) {
      console.log('i', id);
      const res = await this.$api.match.delonline(id);
      console.log(res);
      if (res.code) {
        this.$message.success(res.message);
        this.getmatch();
      }
    },
    updateCompetes(row) {
      console.log('row1', row);
      this.updatematch = row
      console.log(this.updatematch);
      this.updateDialogVisible = true
    },
    async updateinfo() {
      console.log("修改后的", this.updatematch);
      const res = await this.$api.match.updateonline(this.updatematch);
      console.log("addcom", res);
      if (res.code) {
        this.updateDialogVisible = false
        this.$message.success(res.message);
        this.getmatch();
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleAvatarSuccess(val) {
      console.log("图片", val.message);
      this.addmatch.competeImg = val.message;
      // this.updateadmin.userSrc = val.message;
    },
    beforeAvatarUpload(file) {
      const isJPGaPNG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPGaPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      console.log("aaaaa", isLt2M);
      return isLt2M && isJPGaPNG;
    },
    handleExceed() {
      this.$message.warning(`当前限制只能选择 1 个文件`);
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.addTabs(to)
    })
  },
  created() {
    this.getmatch()
  }
}
</script>

<style scoped lang="scss">
.white_div {
  background-color: white;

  .btn {
    float: right;
  }
}
</style>